/**
 * 夜班限时签到
 * @author levy
 */
(function( lf, r) {
    var ajax = lf.utils.ajax,
        log = lf.utils.log,
        RC = r.createClass;

    var imgUrl = '../public/images/signIn/';

    var Header = RC({
        getInitialState: function () {
            return ({
                signed:1,
                shouldSign:2,
                miss:2
            });
        },
        render: function(){
            var appAlertClass = '';
            if(this.props.isAppAlert){
                appAlertClass = 'ele-hide ';
            }

            return (
                <div className={appAlertClass + " header flex-box-row"}>
                    <div className="flex-item">
                        <p className="signed ">{this.state.signed}</p>
                        <p>已签到</p>
                    </div>
                    <div className="flex-item">
                        <p className="shouldSign ">{this.state.shouldSign}</p>
                        <p>今日应签到</p>
                    </div>
                    <div className="flex-item">
                        <p className="miss">{this.state.miss}</p>
                        <p>已错过</p>
                    </div>
                </div>
            );
        }
    });

    var Body = RC({
        getInitialState: function () {
            return ({
                remain:60,
                rotate:'',
            });
        },
        componentDidMount: function () {
            var that = this,
                init = this.state.remain, //初始时间
                middle = init / 2;

            that.state.rotate = setInterval(function(){
                var remain = that.state.remain;
                that.setState({remain:--remain});

                var circle,
                    degree = 180 / middle;//每个环都是一半时间走180度
                //走右环
                if(remain >= middle){
                    circle = r.findDOMNode(that.refs.rightCircle);
                    degree = (init - remain) * degree;
                }
                //走左环
                else{
                    circle = r.findDOMNode(that.refs.leftCircle);
                    degree *= (middle - remain);
                }
                degree += 45; //加上初始旋转的45度
                //log(degree)
                circle.style.cssText = '-webkit-transform: rotate(' + degree + 'deg);' +
                    'transform: rotate(' + degree + 'deg);';

                if(remain <= 0){
                    clearInterval(that.state.rotate);
                    return;
                }

            },1000);



        },
        signIn: function () {
            //alert('签到成功!')
            clearInterval(this.state.rotate);
        },
        cancel: function () {
            alert('cancel');
        },
        render: function(){
            //alert(this.props.isAppAlert)
            var appAlertClass = 'ele-hide ';
            if(this.props.isAppAlert){
                appAlertClass = '';
            }

            //<img className="circle" src={imgUrl + 'circle.png'} />
            return (
                <div className="body ">
                    <p className={appAlertClass + " sign-in-title ele-center"}>限时签到</p>
                    <div className="clock-wrapper ele-center">
                        <img className="clock" src={imgUrl + 'clock.png'} />
                        <span className="time">{this.state.remain + 'S'}</span>
                        <div className="circle-progress">
                            <div className="wrapper right">
                                <div ref="rightCircle" className="progress right-circle"></div>
                            </div>
                            <div className="wrapper left">
                                <div ref="leftCircle" className="progress left-circle"></div>
                            </div>
                        </div>
                    </div>
                    <button onTouchEnd={this.signIn} className="mui-btn lf-green-btn ele-center">签到</button>
                    <a onTouchEnd={this.cancel} className={appAlertClass + " cancel"}>取消</a>
                </div>
            );
        }
    });


    var Content = RC({
        getInitialState: function () {
            return ({
                isAppAlert:false,//是否app弹框形式显示
            });
        },
        render: function () {
            return (
                <div className="sign-in-night">
                    <Header isAppAlert={this.state.isAppAlert}/>
                    <Body isAppAlert={this.state.isAppAlert}/>
                </div>
            )
        }
    });

    r.render(
			<Content />,
			document.getElementById('root'),function(){
        }
	)

})( liefeng, React)
